<template>
    <div class="partnerList">
        <div class="partnerList_top">
            <div class="into_index">首页<i class="el-icon-close"></i></div>
            <div class="current">合作商结算<i class="el-icon-close"></i></div>
        </div>
        <div class="partnerList_bottom">
            <div class="partnerList_bottom_new">
                <div class="partnerList_bottom_new_goods">
                    <div class="partnerList_bottom_new_goods_btn">
                        结算状态
                        <el-select v-model="settStatus" @change="selectSett" placeholder="请选择">
                            <el-option v-for="item in settList" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <!-- <button @click="addRecommend"><i class="el-icon-trophy"></i>新增小区</button> -->
                    </div>
                    <div class="partnerList_bottom_new_goods_screening">
                        <div class="regionSelect">
                            订单日期
                            <el-date-picker clearable v-model="valueTime" :picker-options="pickerOptions" type="daterange" @change="selectTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <div class="partnerList_bottom_new_goods_screening_right">
                            <el-input v-model="order_no" @input="clearOrderNo" placeholder="请输入订单号查询" clearable style="margin-right:10px;"></el-input>
                            <el-input v-model="input" @input="clearInput" placeholder="请输入订单信息查询" clearable></el-input>
                            <button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="商城订单结算" name="1"></el-tab-pane>
                <el-tab-pane label="产品包订单结算" name="4"></el-tab-pane>
                <el-tab-pane label="设计订单结算" name="2"></el-tab-pane>
                <el-tab-pane label="施工订单结算" name="3"></el-tab-pane>
                <el-tab-pane label="pos直接消费订单" name="5"></el-tab-pane>
                <el-tab-pane label="扫码快捷支付" name="6"></el-tab-pane>
            </el-tabs>
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
                    <table>
                        <tr>
                            <th></th>
                            <th>序号</th>
                            <th>商家名称</th>
                            <th v-if="activeName=='1'">订单类型</th>
                            <th>订单号</th>
                            <th>下单时间</th>
                            <th>下单人</th>
                            <th>手机号</th>
                            <th>商品数量</th>
                            <th>订单价</th>
                            <th>商家收入</th>
                            <th>已结算</th>
                            <th>待结算</th>
                            <th>平台提成</th>
                            <th>冻结金</th>
                            <th v-if="activeName!='5'">分佣</th>
                            <th v-else>质保金</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(v,i) in tableList" :key="i">
                            <td>
                                <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                            </td>
                            <td>{{v.id}}</td>
                            <td>{{v.name}}</td>
                            <td v-if="activeName=='1'">
                                {{v.order_type=='product_order'?'商城订单':v.order_type=='pack_order'?'产品包订单':v.order_type=='designer_order'?'设计订单':v.order_type=='builder_order'?'施工订单':v.order_type=='purchase_order'?'选材中心订单':v.order_type=='pos_order'?'pos直接消费订单':''}}
                            </td>
                            <td>{{v.order_no}}</td>
                            <td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm:ss')}}</td>
                            <td>{{v.purchaser}}</td>
                            <td>{{v.mobile}}</td>
                            <td>{{v.quantity}}</td>
                            <td>{{v.order_price}}</td>
                            <td>{{v.store_income}}</td>
                            <td>{{v.finished_settlement_amount}}</td>
                            <td>{{v.wait_settlement_amount}}</td>
                            <td>{{v.platform_income}}</td>
                            <td>{{v.freeze_amount}}</td>
                            <td v-if="activeName!='5'">{{v.promoter_income}}</td>
                            <td v-else>{{v.earnest_amount}}</td>
                            <td>{{v.settle_status==0?'待结算':v.settle_status==1?'已结算':''}}</td>
                            <td>
                                <button class="editor" @click="toEdit(v)">详情</button>
                                <!-- <button class="shelves" @click="toSett(v.order_no)" v-if="v.settle_status==0">结算</button> -->
                            </td>
                        </tr>
                        <!-- 合计栏 -->
                        <tr v-if="tableList.length>0">
                          <td v-if="activeName=='1'" colspan="9"></td>
                          <td v-else colspan="8"></td>
                          <td>{{allOrderPrice}}</td>
                          <td>{{allShopPrice}}</td>
                          <td>{{allSettOk}}</td>
                          <td>{{allNeedSett}}</td>
                          <td>{{allRootPrice}}</td>
                          <td>{{allFreePrice}}</td>
                          <td v-if="activeName!='5'">{{allPromoterPrice}}</td>
                          <td v-else>{{allEarnestPrice}}</td>
                          <td colspan="2">合计</td>
                        </tr>
                        <tr v-if="tableList.length == 0">
                            <td class="table_title" colspan="20">当前数据空空如也</td>
                        </tr>
                    </table>
                    <div class="partnerList_bottom_page">
                        <div class="partnerList_bottom_page_left">
                            <div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
                                <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                            </div>全选
                            <!-- <el-button type="primary" style="margin-left:15px;" @click="toSettBtn" v-if="settStatus!=1">确认结算</el-button> -->
                            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
                        </div>
                        <div class="partnerList_bottom_page_right">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[15, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                cateList: [],
                cate: {},
                input: '',
                checkAll: false,
                page: 1,
                pageSize: 15,
                total: 0,
                checkBoxAll: [], // 选中的数据
                shelvesAlls: [],
                tableList: [],
                valueTime: [],
                activeName: '1',
                startDate: '',
                endDate: '',
                order_no:'',
                settList: [{
                    name: '待结算',
                    value: 0
                }, {
                    name: '已结算',
                    value: 1
                }, ],
                settStatus: 0,
                pickerOptions:{
                  disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                  }
                },
            }
        },
        mounted() {
            this.getEstateList()
        },
        computed:{
          // 订单总计
          allOrderPrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.order_price*1
            })
            return num.toFixed(2)
          },

          // 商家收入
          allShopPrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.store_income*1
            })
            return num.toFixed(2)
          },

          // 已结算
          allSettOk(){
            let num = 0
            this.tableList.map(item=>{
              num += item.finished_settlement_amount*1
            })
            return num.toFixed(2)
          },

          // 待结算
          allNeedSett(){
            let num = 0
            this.tableList.map(item=>{
              num += item.wait_settlement_amount*1
            })
            return num.toFixed(2)
          },

          // 平台提成
          allRootPrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.platform_income*1
            })
            return num.toFixed(2)
          },
          
          // 冻结金
          allFreePrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.freeze_amount*1
            })
            return num.toFixed(2)
          },
          
          // 分佣
          allPromoterPrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.promoter_income*1
            })
            return num.toFixed(2)
          },
          
          // 质保金
          allEarnestPrice(){
            let num = 0
            this.tableList.map(item=>{
              num += item.earnest_amount*1
            })
            return num.toFixed(2)
          },

        },
        methods: {
            // 获取商家结算列表
            getEstateList() {
                let params = {
                    type: this.activeName == '1' ? 'product_order' : this.activeName == '4' ? 'pack_order' : this.activeName == '2' ? 'designer_order' : this.activeName == '3' ? 'builder_order' : this.activeName == '5' ? 'pos_order' : this.activeName == '6' ? 'fast_pay_order' : '',
                    sta_date: this.startDate,
                    end_date: this.endDate,
                    keyword: this.input,
                    page: this.page,
                    pagesize: this.pageSize,
                    settle_status: this.settStatus,
                    order_no: this.order_no
                }
                this.$http.post('/api/root/settle/index', params).then(res => {
                    console.log(res, '商家结算列表');
                    if (res.code == 1) {
                        this.tableList = res.data[0].list ? res.data[0].list : []
                        this.total = res.data[0].order_count
                    }
                })
            },

            // 清除订单搜索
            clearOrderNo(){
              if(this.order_no==''){
                this.getEstateList()
              }
            },
            // 清除关键字
            clearInput(){
              if(this.input==''){
                this.getEstateList()
              }
            },

            // 切换tab
            handleClick(e) {
                this.getEstateList()
                this.shelvesAlls = []
                this.checkBoxAll = []
                this.checkAll = false
            },

            // 选择结算状态
            selectSett() {
                this.getEstateList()
            },

            // 选择时间
            selectTime() {
                this.startDate = this.valueTime ? this.$moment(this.valueTime[0]).format('yyyy-MM-DD') : '';
                this.endDate = this.valueTime ? this.$moment(this.valueTime[1]).format('yyyy-MM-DD') : '';
                this.getEstateList()
            },

            // 删除按钮
            toDel(id) {
                this.$confirm('确定删除该小区吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/api/root/Estate/del', { id }).then(res => {
                        console.log(res, '删除结果');
                        if (res.code == 1) {
                            this.getEstateList()
                            this.$message.success('删除成功')
                        } else {
                            this.$message.warning(res.msg)
                        }
                    })
                }).catch(() => {
                    console.log('点击取消');
                })
            },

            // 搜索
            handerSeach() {
                this.getEstateList()
            },

            // // 详情按钮
            // toEdit(order_id,store_id){
            // 	this.$router.push({name:'completedDetails',query:{order_id,type:'settOrder',store_id}})
            // },

            // 详情按钮
            toEdit(item) {

                let query = {
                    order_no: item.order_no,
                    settle_status: item.settle_status,
                    purchaser: item.purchaser,
                    create_time: item.create_time,
                    mobile: item.mobile,
                    order_price: item.order_price,
                    shopType: this.activeName
                }
                console.log(item, query, '结算');
                let data = encodeURIComponent(JSON.stringify(query))
                this.$router.push({ name: 'shopSettleDetail', query: { data } })
            },

            // 状态选择
            statusSelectFn(e) {
                console.log(e, '状态选择');
                this.getInfoList()
            },

            // 单个结算按钮
            toSett(order_no) {
                this.$confirm('确定结算该订单吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(order_no, '结算订单号');
                    this.$http.post('/api/root/settle/action', { order_no }).then(res => {
                        console.log(res, '结算结果');
                        if (res.code == 1) {
                            this.$message.success('结算成功')
                            this.getEstateList()
                        } else {
                            this.$message.warning(res.msg)
                        }
                    })
                }).catch(() => {})
            },

            //多选结算按钮
            toSettBtn() {
                if (!this.shelvesAlls.length) {
                    this.$message.warning('请选择需要结算的订单')
                    return
                }
                this.$confirm('确定结算所选订单吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let order_no = this.shelvesAlls.join(',')
                    console.log(order_no, '结算订单号');
                    this.$http.post('/api/root/settle/action', { order_no }).then(res => {
                        console.log(res, '结算结果');
                        if (res.code == 1) {
                            this.$message.success('结算成功')
                            this.getEstateList()
                        } else {
                            this.$message.warning(res.msg)
                        }
                    })
                }).catch(() => {})
            },

            // 多选
            handlerCheckbox(i) {
                console.log(i);
                let arr = this.checkBoxAll;
                if (arr.includes(i)) {
                    let index = arr.indexOf(i);
                    if (index != -1) {
                        arr.splice(index, 1);
                        this.shelvesAlls.splice(index, 1);
                        if (this.checkBoxAll.length !== this.tableList.length) {
                            this.checkAll = false;
                        }
                    }
                } else {
                    this.checkBoxAll.push(i);
                    this.shelvesAlls.push(this.tableList[i].order_no);
                    if (this.checkBoxAll.length == this.tableList.length) {
                        this.checkAll = true;
                    }
                };
                console.log(this.shelvesAlls);
            },
            // 全选与全不选
            handerCheckAll() {
                this.checkAll = !this.checkAll;
                let arr = this.tableList.length;
                this.checkBoxAll = [];
                this.shelvesAlls = [];
                if (this.checkAll) {
                    for (let i = 0; i < arr; i++) {
                        this.checkBoxAll.push(i);
                    }
                    this.checkBoxAll.map(v => {
                        this.shelvesAlls.push(this.tableList[v].order_no.toString());;
                    })
                } else {
                    this.checkBoxAll = [];
                    this.shelvesAlls = []
                }
                console.log(this.shelvesAlls);
            },

            // // 全选后的删除
            // selectDel(){
            // 	console.log(this.shelvesAlls);
            // 	let res =[...new Set(this.shelvesAlls)]; //去重
            // 	console.log(res);
            // 	let str = res.join(',');
            // 	if(this.shelvesAlls.length){
            // 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
            // 			confirmButtonText: '确定',
            // 			cancelButtonText: '取消',
            // 			type: 'warning'
            // 		}).then(()=>{
            // 			this.$http.post('/api/root/designer/del',{id:str}).then(res=>{
            // 				console.log(res);
            // 				if(res.code==1){
            // 					this.getDesigList();
            // 					this.checkAll=false;
            // 					this.checkBoxAll=[];
            // 					this.shelvesAlls=[];
            // 					this.$message({
            // 						type:'success',
            // 						message:'删除成功'
            // 					})
            // 				}
            // 			})
            // 		})
            // 	}else{
            // 		this.$message({
            // 			type:'info',
            // 			message:'请选择要删除的项'
            // 		})
            // 	}
            // },


            handleSizeChange(val) {
                this.pageSize = val;
                this.getEstateList()
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getEstateList()
            },
        }
    }
</script>

<style lang="less" scoped>
    @import 'shopSettle.less';
</style>